<template>
    <div class="category">
        <div class="category-header">
            <SearchHeader
                :shape="`round`"
            />
        </div>
        <div class="category-container">
            <div class="category-nav">
                <ul class="category-nav-ul">
                    <li
                        class="category-nav-li"
                        v-for="(item, i) in categoryData"
                        :key="item.classifyId"
                        @click="changeActiveIndex(i)"
                        :class="activeIndex === i ? 'active' : ''"
                    >
                        <h3>{{ item.classifyName }}</h3>
                    </li>
                </ul>
            </div>
            <div class="category-content" v-if="shopData">
                <div class="shop-box">
                    <div class="shop-banner" v-if="shopData.banner">
                        <img :src="shopData.banner[0].image" alt="">
                    </div>
                    <div
                        class="shop-category"
                        v-for="item in shopData.second"
                        :key="item.classifyId"
                    >
                        <h4>{{ item.classifyName }}</h4>
                        <ul class="shop-category-ul">
                            <li
                                class="shop-category-li"
                                v-for="cell in item.third"
                                :key="cell.classifyId"
                            >
                                <div class="img-box">
                                    <img :src="cell.image" alt="">
                                </div>
                                <h5>{{ cell.classifyName }}</h5>
                                <router-link
                                    class="link"
                                    tag="div"
                                    :to="{name:'list', query: {classifyid: cell.classifyId}}"
                                />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SearchHeader from '@/components/SearchHeader'
export default {
    name: 'category',
    data () {
        return {
            categoryData: null,
            activeIndex: 0,
            shopData: null
        }
    },
    created () {
        // console.log('加载')
        this.$http.getCategoryData()
            .then(resp => {
                // console.log(resp)
                this.categoryData = resp
                this.shopData = this.categoryData[0]
            })
    },
    methods: {
        changeActiveIndex (i) {
            this.activeIndex = i
            this.shopData = this.categoryData[i]
            // console.log(this.shopData)
        }
    },
    components: {
        SearchHeader
    }
}
</script>

<style lang="scss">
.category {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .category-header {
        height: 50px;
    }
    .category-container {
        width: 100%;
        overflow: hidden;
        flex: 1;
        display: flex;
        .category-nav {
            width: 84px;
            height: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
            border-right: 1px solid #ebebeb;
            background-color: #fff;
            .category-nav-ul {
                padding: 28px 6px 0;
                .category-nav-li {
                    &.active {
                        background-color: #f6ebea;
                        h3 {
                            color: #d44d44;
                        }
                    }
                    margin-bottom: 18px;
                    background-color: #fff;
                    padding: 6px 0;
                    border-radius: 5px;
                    h3 {
                        font-size: 12px;
                        color: #535353;
                        text-align: center;
                        line-height: 12px;
                        font-weight: bold;
                    }
                }
            }
        }
        .category-content {
            flex: 1;
            height: 100%;
            overflow-x: hidden;
            .shop-box {
                .shop-banner {
                    width: 100%;
                    padding: 20px 12px;
                    box-sizing: border-box;
                    border-bottom: 1px dotted #e4e4e4;
                    img {
                        display: block;
                        width: 100%;
                        border-radius: 10px;
                        overflow: hidden;
                    }
                }
                .shop-category {
                    width: 100%;
                    padding: 20px 12px;
                    box-sizing: border-box;
                    border-bottom: 1px dotted #e4e4e4;
                    h4 {
                        font-size: 16px;
                        color: #262626;
                        font-weight: bold;
                        text-indent: 10px;
                    }
                    .shop-category-ul {
                        width: 100%;
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        .shop-category-li {
                            flex-grow: 0;
                            flex-shrink: 0;
                            width: 33.3%;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: center;
                            padding-right: 1%;
                            box-sizing: border-box;
                            position: relative;
                            &:nth-of-type(3n) {
                                padding-right: 0;
                            }
                            .img-box {
                                width: 100%;
                                background-color: #f5f5f5;
                                border-radius: 8px;
                                margin-top: 16px;
                                img {
                                    width: 100%;
                                    display: block;
                                }
                            }
                            h5 {
                                font-size: 12px;
                                color: #333;
                                font-weight: bold;
                                margin-top: 10px;
                            }
                            .link {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                top: 0;
                                left: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
